<template>
  <div class="Color">
      <!--详情页 -->
      <van-nav-bar
      :title="list.community"
      left-arrow
      @click-left="onClickLeft"
    />
      <!-- 轮播图 -->
       <div class='rotograph'>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item,index) in list.houseImg" :key="index">
                 <img :src="`http://liufusong.top:8080${item}`" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 主体 -->
         <div class='subject'>
            <p class="h3" >{{list.description}}</p>
            <div class="xiang">
                  <div v-for="(item,index) in list.tags" :key="index"><van-tag type="primary" >{{item}}
                    </van-tag></div>

            </div>
            <div class="zujing">
                    <div class="to">
                     <div class="red">{{list.price}}<span>/月</span></div>
                      <div>租金</div>
                    </div>
                    <div class="to">
                        <div class="red" >{{list.roomType}}</div>
                        <div>房型</div>
                    </div>
                    <div class="to">
                         <div class="red">{{list.size}}平米</div>
                         <div>面积</div>
                    </div>
            </div>
            <div class="zhuang">
                  <div class="z-top">
                       <div><span>装修：</span>精装</div>
                       <div><span>楼层：</span>{{list.floor}}</div>
                  </div>
                    <div class="z-top">
                       <div><span>朝向：</span><em v-for="(item,index) in list.oriented" :key="index">{{item}}</em></div>
                       <div><span>类型：</span>普通住宅</div>
                  </div>
            </div>
         </div>
         <!-- 地图 -->
         <div class="ditu">
                  <div class="di-top">小区：<span>天山星城</span></div>
                  <div class="tu">
                      <baidu-map class="map" :center="{lng:lng,lat:lat}" :zoom="16" >

                          <bm-overlay
                            pane="labelPane"
                            class="sample"
                            @draw="draw">
                            <div>{{community}}</div>
                          </bm-overlay>
                      </baidu-map >
                  </div>
         </div>
         <!-- 房屋配套 -->
         <div class='fangwu'>
                <div class="f-top">房屋配套</div>
                <div class="shebei">
                     <span  v-for="(item,index) in list.supporting" :key="index">{{item}}</span>
                </div>
         </div>
         <!-- 房源概况 -->
         <div class="fangyuan">
               <div class="fang-top">房源概况</div>
               <div class="fangzu">
                    <div class="fang-zu">
                         <img src="http://liufusong.top:8080/img/avatar.png" alt="">
                         <div>
                             <p>王女士</p>
                             <p class="ren"><van-icon name="shield-o"/>  已认证房主</p>
                         </div>
                    </div>
                    <div><van-button plain type="primary">发消息</van-button></div>
               </div>
               <div>
                    1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
                    2.小区规模大配套全年，幼儿园，体育场，游泳馆，养老院，小学。 3.人车分流，环境优美。
                     4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
               </div>
         </div>
    <!-- 底部 -->
    <div class='foot'>
          <div class="shou" @click="dianji(list.houseCode)"><img :src="img" alt="">
          收藏</div>
          <div class="zhai">在线咨询</div>
          <div class="dian">电话预约</div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'ZufangDetails',
  // 初始化数据
  created () {
    this.code = this.$route.query.val
    // 初始化接口
    this.houses()
    // 初始化数据
    this.list = {}
    // 初始化照片
    this.img = 'http://liufusong.top:8080/img/unstar.png'
  },
  data () {
    return {
      // 接口要的数据
      code: '',
      list: {},
      img: 'http://liufusong.top:8080/img/unstar.png',
      isAll: true,
      lng: '',
      lat: '',
      community: ''
    }
  },

  mounted () {

  },

  methods: {
    draw ({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(this.lng, this.lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    // 跳回点击页面
    onClickLeft () {
      this.$router.go(-1)
    },
    // 获取详情页接口
    async houses () {
      const red = await request({
        url: `houses/${this.code}`
      })
      // 导航栏名称
      console.log(red.body)
      this.list = red.body
      this.lng = red.body.coord.longitude
      this.lat = red.body.coord.latitude
      this.community = red.body.community
      // console.log(this.community)
      // console.log(this.lng)
      // console.log(this.lat)
    },
    // 点击添加点击删除
    async dianji (val) {
      if (this.isAll) {
        await request({
          url: `/user/favorites/${val}`,
          method: 'POST'
        })
        // console.log(red)
        this.isAll = false
        this.$toast('添加收藏')
        this.img = 'http://liufusong.top:8080/img/star.png'
      } else {
        // const red =
        await request({
          url: `/user/favorites/${val}`,
          method: 'DELETE'
        })
        // console.log(red)
        this.$toast('删除收藏')
        this.isAll = true
        this.img = 'http://liufusong.top:8080/img/unstar.png'
      }
    }

  }
}
</script>

<style lang="less" scoped>
 *{
  margin: 0;
  padding: 0;
 }
//  背景色
.Color{
   background-color: #9d9d9d;
   margin-bottom:50px ;
}
//  轮播图
.rotograph{
    height: 212px;
     background-color: #39a9ed
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 212px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      width: 100%;
      height: 100%;
    }
  }
// 主体
.subject{
    height: 249px;
    width: 100%;
    background-color: #fff;
    padding: 5px;
    .h3{
       font-size: 16px;
       margin: 10px 0;
    }
    .xiang{
        height: 20px;
        width: 100%;
        display: flex;
        div{
          width: 25%;
        }
    }
    .zujing{
        height: 85px;
        width: 100%;
        // background-color: #ff4848;
        margin: 10px 0;
        border-top: solid 1px #999;
        border-bottom: solid 1px #999;
        display: flex;
        text-align: center;
        align-content: space-between;
        .to{
          width: 33%;
          .red{
             margin-top:20px ;
             color: #ff4848;
             font-size: 18px;
          }
          div{
             font-size: 16px;
             color:#d7b599;
          }
        }
    }
        .zhuang{
             height: 52px;
             width: 100%;
             display: flex;
             margin: 10px 0;
             .z-top{
                width: 49%;
                height:100%;
                div{
                   margin:5px 0;
                   span{
                       font-size:14px;
                       color: #999;
                   }
                }
             }
        }
}
// 地图
.ditu{
   height: 190px;
   width: 100%;
   margin-top: 10px ;
    background-color: #fff;
   .di-top{
     padding: 10px 5px;
     height: 45px;
     font-size: 14px;
     span{
       font-size: 16px;
     }
   }
   .tu{
     height: 145px;
     width: 100%;
     background-color: #7aff6e;
   }
}
// 房屋配套
.fangwu{
    width:100%;
    height: 200px;
    background-color: #fff;
    .f-top{
        font-size: 16px;
        padding: 8px 0;
        margin: 0 8px;
        border-bottom:solid 1px #999;
    }
    .shebei{
        display: flex;
        align-content:space-around;
        text-align: center;
        flex-wrap: wrap;
        span{
           width: 20%;
           height: 50px;
           line-height: 50px;
           margin: 10px 0;
        }
    }
}
// 房源概况
.fangyuan{
   width: 100%;
   height: 265px;
   margin-top:10px ;
   padding: 0 10px;
   background-color: #ffffff;
   .fang-top{
     font-size: 16px;
     padding:10px 5px;
     border-bottom:solid 1px #999;
   }
   .fangzu{
      height: 60px;
      padding: 10px ;
      display: flex;
      align-content: space-between;
       margin-bottom:20px ;
      .fang-zu{
           width: 70%;
            display: flex;

           img{
              width: 52px;
              height: 52px;
              overflow: hidden;
              border-radius: 30px;
              margin-right:8px;
           }
           p{
            font-size: 14px;
           }
           .ren{
             font-size: 12px;
             margin-top:5px ;
             color: red;
           }

      }
   }
}
//  尾部
.foot{
     height: 50px;
     width: 100%;
     line-height: 50px;
     position:fixed;
     bottom: 0px;
     display: flex;
     text-align: center;
     color: #4e4e4e;
      border-top: solid 1px #adadad;
      background-color: #fff;
     .shou{
       width: 30%;
       border-right: solid 1px #adadad;
       img{
           padding-top:2px ;
           width: 15px;
           height: 15px;
       }
     }
     .zhai{
       width: 38%;
     }
     .dian{
       width: 32%;
       color: #fff;
       background-color: #21b97a;
     }
}
.map {
  width: 100%;
  height: 145px;
}
.sample {
  width: 60px;
  height: 20px;
  background: red;
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  // padding: 10px;
  position: absolute;
  font-size: 12px;
}
</style>
